<style scoped>
    .home_body {
        width: 80%;
        margin: 100px auto 100px;
    }
    
    .com_block table.table .btn {
        padding: 5px 8px;
    }
</style>
<div class="com_content home_body" id="home_body" v-if="userMsg.level==0?true:false" v-cloak>
    <div class="com_title">
        <div class="h1">用户列表</div>
        <div class="right">
            <button class="btn btn-main" @click="addsystem">+添加应用</button>
        </div>
    </div>
    <div v-show="isLoadend && datalist.length">
        <div class="com_block mt20">
            <div class="overflow_table">
                <table class="table">
                    <tr class="light_color">
                        <th class="tc w-100">用户名称</th>
                        <th class="tc w-100">用户级别</th>
                        <th class="tc w-100">是否冻结</th>
                        <th class="tc w-200">创建时间</th>
                        <th class="tc w-200">操作</th>
                    </tr>
                    <tr v-for="item in datalist">
                        <td class="tc">{{item.user_name}}</td>
                        <td class="tc">{{item.level==0?'管理员':'普通用户'}}</td>
                        <td class="tc">{{item.is_use==0?'正常':'冻结'}}</td>
                        <td class="tc">{{item.create_time|date('/',true)}}</td>
                        <td class="tc">
                            <button v-if="item.is_use==0?true:false" class="btn btn-default" @click="setIsUse(item)">冻结</button>
                            <button v-if="item.is_use==1?true:false" class="btn btn-main" @click="setIsUse(item)">解冻</button>
                            <button class="ml10 btn btn-default" @click="deleteUser(item)">删除</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!--  分页 -->
        <div class="tc common_page_style mt10">
            <div id="copot-page" class="copot-page"></div>
        </div>
    </div>
    <div v-if="isLoadend && !datalist.length" class="empty mt30 tc">暂无用户！</div>
</div>
<script>
    new Vue({
        el: '#home_body',
        data: function() {
            return {
                datalist: [],
                isLoadend: false,
                pageNo: 1,
                pageSize: 6,
                totalNum: 0,
                username: '',
                userMsg: {},
            }
        },
        filters: {
            date: window.Filter.date,
        },
        mounted() {
            const userMsg = util.getStorage('local', 'userMsg');
            this.userMsg = userMsg ? JSON.parse(userMsg) : {};
            
            //非管理员禁止查看此页面
            if (this.userMsg.level !== 0) {
                popup.confirm({
                    title: '你无权限访问此页面，请返回', yes: () => {
                        window.history.back();
                    }, no: () => {
                        window.history.back();
                    }
                })
                return;
            }

            this.getUserList();
        },
        methods: {
            addsystem() {
                location.href = `/selectype`
            },
            getUserList() {
                this.isLoadend = false;
                util.ajax({
                    url: `${config.baseApi}api/v1/user/getUserList`,
                    data: {
                        pageNo: this.pageNo,
                        pageSize: this.pageSize,
                        userName: this.username,
                    },
                    success: data => {
                        this.isLoadend = true;
                        if (!data.data.datalist && !data.data.datalist.length) {
                            this.datalist = [];
                            return;
                        }
                        this.datalist = data.data.datalist
                        new Page({
                            parent: $('#copot-page'),
                            nowPage: this.pageNo,
                            pageSize: this.pageSize,
                            totalCount: data.data.totalNum,
                            callback: (nowPage, totalPage) => {
                                this.pageNo = nowPage;
                                this.getUserList();
                            }
                        });
                    }
                })
            },
            searchUserList() {
                this.pageNo = 1;
                this.isLoadend = false;
                this.getUserList();
            },
            setIsUse(item) {
                util.ajax({
                    url: `${config.baseApi}api/v1/user/setIsUse`,
                    data: {
                        id: item._id,
                        usertoken: item.usertoken,
                        isUse: item.is_use == 0 ? 1 : 0,
                    },
                    success: data => {
                        this.getUserList();
                        popup.miss({
                            title: '操作成功!'
                        })
                    }
                })
            },
            deleteUser(item) {
                const _this = this;
                popup.confirm({
                    title: '确定删除此用户吗？',
                    yes() {
                        util.ajax({
                            url: `${config.baseApi}api/v1/user/delete`,
                            data: {
                                id: item._id,
                                usertoken: item.usertoken,
                            },
                            success: data => {
                                _this.getUserList();
                                popup.miss({
                                    title: '操作成功!'
                                })
                            }
                        })
                    }
                })
            },
        },
    })
</script>